<template>
  <div>
       <div class="SearchSongs">
        <!-- <div class="top">
            <h3>vue云音乐</h3>
        </div> -->
  
        <div class="center">
            <div class="listleft">
                <ol>  
                    <li><span></span><em>清空列表</em> </li> 
                    <li><span></span><em>删除</em> </li>
                    <li><span></span><em>下载</em> </li>
                    <li><span></span><em>添加到</em> </li>
                    <li><span></span><em>收藏</em> </li>
                </ol>
                <ul >
                    <li v-for="(item,index) in this.$store.state.searchlist " 
                    :key="index"
                    @click="getsongauto(item.id)"
                    >{{item.name}}</li>
                </ul>
            </div>
            <div class="songright"></div>
        </div>
        <div class="footer">
            <audio :src="searchurl" autoplay controls loop muted></audio>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
name:'SearchSongs',
//  components:{MyHeader},
    data (){
        return{
            // searchlist:[],
            searchurl:'',
        }
 },
    methods:{
        getsongauto(id){
           
            let that=this;
            axios.get('http://localhost:3000/song/url?id=' + id)
            .then(function(res){
                that.searchurl=res.data.data[0].url;
                // console.log(res.data.data[0].url);
            },
            function(erro){
                console.log(erro);
            });
        }
    },
}
// 搜索

// 说明 : 调用此接口 , 传入搜索关键词可以搜索该音乐 / 专辑 / 歌手 / 歌单 / 用户 , 关键词可以多个 , 以空格隔开 , 如 " 周杰伦 搁浅 "( 不需要登录 ), 搜索获取的 mp3url 不能直接用 , 可通过 /song/url 接口传入歌曲 id 获取具体的播放链接

// 必选参数 : keywords : 关键词

// 可选参数 : limit : 返回数量 , 默认为 30 offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0

// type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合

// 接口地址 : /search 或者 /cloudsearch(更全)

// 调用例子 : /search?keywords= 海阔天空 /cloudsearch?keywords= 海阔天空
</script>

<style>
   .SearchSongs {
            width: 100%;
            height: 700px;
            background-color: rgba(0, 0, 0, .3);
            display: flex;
            flex-direction: column;
        }.center {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
        }
        
        .center .listleft {
            flex: 2;
            height: 600px;
            /* background-color: rgb(239, 255, 170); */
        }
        
        .center .songright {
            flex: 1;
            /* background-color: rgb(215, 255, 196); */
        }
        
        .center .listleft {
            display: flex;
            flex-direction: column;
        }
        
        .center .listleft ol {
           
            height: 30px;
            line-height: 30px;
        }
        
        .center .listleft ol li {
             font-family: 'icomoon';
            float: right;
            margin: 3px;
            margin-right: 10px;
            list-style: none;
            border: 2px solid rgb(228, 228, 228);
            margin-bottom: 3px;
        }
        .center .listleft ol li em{
           font-style: normal;
           display: inline-block;
           margin-left: 3px;
        }
        .center .listleft ul {
            flex: 1;
            height: 600px;
            overflow: auto;
            /* background-color: rgb(34, 93, 255); */
        }
        .center .listleft ul li{
            height: 50px;
            line-height: 50px;
        }
        .center .listleft ul li:nth-child(2n){
            background-color: rgb(209, 255, 166);
        }
        /* =====================================================  */
        
        .footer {
            height: 80px;
            background-color: rgb(108, 221, 255);
        }
        
        .footer audio {
            width: 100%;
            height: 100%;
        }
</style>